<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>选择汽车型号</title>
    <meta content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <link href="../css/mui.min.css" rel="stylesheet" />
    <link href="../css/Top.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../css/api.css">
</head>
<style>
    .aui-info {
        border-top: 1px #ccc solid;
        padding: .3rem .3rem 0 .3rem;
    }

    .listcon {
        display: inline-block;
        height: 1rem;
        line-height: 1rem;
        position: relative;
        top: -.4rem;
        padding-left: 10px;
    }
</style>

<body>

    <div class="main">
        <header id="header">
            <div onclick="api.closeFrame();" tapmode>
                <a class="mui-icon mui-icon-left-nav" style="color: white;"></a>
            </div>
            <div>
                <span>选择汽车型号</span>
            </div>
        </header>
        <div class="box" style="height:50px;">
            <ul id="datalist">
                <!-- <li class="aui-info" onclick="fnDataFrame({{$value}})">
                    <div class="aui-info-item">
                        <img src={{$value.img}} style="width:1rem;height:1rem" class="aui-img-round" />
                        <div class="listcon">
                            {{$value.title}}
                        </div>
                    </div>
                </li>
                <li class="aui-info" onclick="fnDataFrame({{$value}})">
                    <div class="aui-info-item">
                        <img src={{$value.img}} style="width:1rem;height:1rem" class="aui-img-round" />
                        <div class="listcon">
                            {{$value.title}}
                        </div>
                    </div>
                </li>
                <li class="aui-info" onclick="fnDataFrame({{$value}})">
                    <div class="aui-info-item">
                        <img src={{$value.img}} style="width:1rem;height:1rem" class="aui-img-round" />
                        <div class="listcon">
                            {{$value.title}}
                        </div>
                    </div>
                </li> -->
            </ul>
        </div>
    </div>
</body>

</html>
<script src="../script/api.js"></script>
<script type="text/javascript" src="../script/public-head.js"></script>
<script src="../script/top.js" type="text/javascript"></script>
<script src="../script/template-web.js"></script>
<script src="../script/mui.js"></script>
<script src="../script/rem.js"></script>

<script type="text/html" id="ListTemp">
    {{each model_list}}
    <li class="aui-info" onclick="fnDataFrame({{$value}})">
        <div class="aui-info-item">
            <img src="{{$value.img}}" style="width:1rem;height:1rem" class="aui-img-round" />
            <div class="listcon">
                {{$value.title}}
            </div>
        </div>
    </li>
    {{/each}}
</script>
<script>
    // var carTypeId = $api.getStorage('carTypeId');
    // var carTypeName = $api.getStorage('carTypeName');
    // var token;
    var carTypeId, carTypeName, listContact;
    apiready = function() {
        init();
        carTypeId = api.pageParam.carTypeId;
        carTypeName = api.pageParam.carTypeName;
        console.log(carTypeId + carTypeName);
        // listContact = api.require('listContact');
        // Distinguish();
        GetCarmodel(carTypeId);
    };


    // 获取数据源
    function GetCarmodel(carTypeId) {
        api.showProgress({
            title: '努力加载中...',
            text: '先喝杯茶...',
            // modal: false
        });

        BASE.MYajax({
            'pathName': 'home/getCarModels', //请求路径
            'ajaxData': {
                values: {
                    // 传递id
                    brand_id: carTypeId,
                }
            },
            'method': fnGetInitData //调用函数
        });
    }

    function fnGetInitData(ret, err) {
        api.hideProgress();
        if (ret) {
            // console.log(JSON.stringify(ret));
            var list = ret.data;
            // fnOpen(list)
            var res = template("ListTemp", list);
            var eachBox = $api.byId("datalist");
            eachBox.innerHTML = res;
        } else {
            alert(JSON.stringify(err));
        }
    }

    function fnDataFrame(data) {
        // console.log(JSON.stringify(data));
        $api.setStorage('car_brand_id', data.id);
        $api.setStorage('car_brand_name', data.model);
        api.closeFrame({
            name: 'brand'
        });
        api.closeFrame({
            name: 'ModelList'
        });
    }
    // 打开listContact
    // function fnOpen(dataOBj) {
    //   alert(JSON.stringify(dataOBj));
    //   // console.log("fnOpen:",JSON.stringify(dataOBj));
    //     listContact.open({
    //         y: document.querySelector('.main').offsetHeight,
    //         h: api.winHeight - document.querySelector('.main').offsetHeight,
    //         cellBgColor: '#fff',
    //         data: {
    //           "": dataOBj,
    //         }
    //     }, function (ret, err) {
    //         // 点击返回数据
    //         if (ret) {
    //             var carTypeName = dataOBj[ret.index].model;
    //             var carTypeId = dataOBj[ret.index].id;
    //             $api.setStorage('car_brand_id', carTypeId);
    //             $api.setStorage('car_brand_name', carTypeName);
    //             api.closeFrame({
    //                 name: 'brand'
    //             });
    //             api.closeFrame({
    //                 name: 'brand_model'
    //             });
    //         } else {
    //           console.log(JSON.stringify(err));
    //         }
    //     });
    // }
</script>
